<template>
<div>
    <Header @add="addFn"></Header>
    <Section :list="list" :listw="listw" @Doing="DoingFn" @Done="DoneFn" @delw="delwFn" @del="delFn"></Section>
    <Footer></Footer>
  
  
</div>
</template>

<script>
import Header from './components/Header'
import Section from './components/Section'
import Footer from './components/Footer'
export default {
  components:{
    Header,
    Section,
    Footer
  },
  data(){
    return {
      list:JSON.parse(localStorage.getItem('list')) || [],
      listw: JSON.parse(localStorage.getItem('listw')) || []
    }
  },
  methods:{
    DoingFn(id){
      const result = this.list.find(item=>item.id === id)
      result.isDone = !result.isDone
      if(result.isDone === true){
        const obj = this.list.filter(item=>item.isDone)
        obj.forEach(item=>{
          if(item.id === id){
            this.listw.push(item)
          }
        })
        console.log(this.listw);
      }
      this.list = this.list.filter(item=>!item.isDone)
    },
    DoneFn(id){
      const result = this.listw.find(item=>item.id === id)
      result.isDone = !result.isDone
      if(result.isDone === false){
        const obj = this.listw.filter(item=>!item.isDone)
        obj.forEach(item=>{
          if(item.id === id){
            console.log(item);
            this.list.push(item)
          }
        })
      }
      this.listw = this.listw.filter(item=>item.isDone)
    },
    addFn(name){
      if(!name) return alert('请输入任务名')
      this.list.push({
        id:Date.now(),
        name,
        isDone:false
      })
    },
    delwFn(id){
      this.listw = this.listw.filter(item=>item.id !== id)
    },
    delFn(id){
      this.list = this.list.filter(item=>item.id !==id)
    }
  },
   watch:{
     list:{
       deep:true,
       handler(value){
         localStorage.setItem('list',JSON.stringify(value))
       }
     },
     listw:{
       deep:true,
       handler(value){
         localStorage.setItem('listw',JSON.stringify(value))
       }
     }
   }
}
</script>

<style>

</style>